import { Avatar } from "antd-mobile";
import styles from "./index.module.css";
import { RightOutline } from "antd-mobile-icons";

import Home from "../../image/one.png";
import User from "../../image/two.png";
import Cook from "../../image/three.png";
import Device from "../../image/four.png";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";
import request from "../../axios";
const Mine = () => {
  const list: any[] = [
    { name: "门店管理", icon: Home, path: "/shop" },
    { name: "成员管理", icon: User, path: "/sales" },
    { name: "菜谱管理", icon: Cook, path: "/cook" },
  ];

  const info = JSON.parse(localStorage.getItem("info") || "{}");
  const navigate = useNavigate();

  const getInfo = async () => {
    try {
      const { data } = await request.post(
        `/user/${JSON.parse(localStorage.getItem("info") || "{}")?.id}`
      );
      if (data) localStorage.setItem("info", JSON.stringify(data));
    } catch (error) {}
  };

  const backLogin = () => {
    localStorage.clear();
    localStorage.removeItem("token");
    navigate("/");
  };

  useEffect(() => {
    getInfo();
  }, []);

  return (
    <div className={styles.tab}>
      <div className={styles.back} onClick={() => backLogin()}>
        退出登录
      </div>
      <div className={styles.top}>
        <div className={styles.top_content}>
          <div className={styles.left}>
            <Avatar src="" style={{ "--size": "56px", borderRadius: "50%" }} />
            <div className={styles.flex_y}>
              <div>{info?.name}</div>
              <span>{info?.phone}</span>
            </div>
          </div>
          {/* <RightOutline /> */}
        </div>
      </div>
      <div className={styles.center}>
        {list.map((item: any, ind: number) => {
          return (
            <div
              className={styles.center_list}
              style={{
                display: info?.permission.includes(String(ind + 1))
                  ? "flex"
                  : "none",
              }}
              onClick={() => {
                navigate(item.path);
              }}
            >
              <span className={styles.flexs}>
                <img src={item.icon} alt="" />
                {item.name}
              </span>
              <RightOutline />
            </div>
          );
        })}
        <div
          className={styles.center_list}
          style={{
            display: "flex",
          }}
          onClick={() => {
            navigate('/check');
          }}
        >
          <span className={styles.flexs}>
            <img src={Cook} alt="" />
            菜品评分
          </span>
          <RightOutline />
        </div>
        
        {/* 设备管理入口 */}
        <div
          className={styles.center_list}
          style={{
            display: "flex",
          }}
          onClick={() => {
            navigate('/device');
          }}
        >
          <span className={styles.flexs}>
            <img src={Device} alt="" />
            设备管理
          </span>
          <RightOutline />
        </div>
      </div>
    </div>
  );
};

export default Mine;
